<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8"/>
    <title>Spring Boot中使用ECharts</title>
    <script src="https://cdn.bootcss.com/echarts/4.6.0/echarts.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>

    <style>
        body {
            margin: 0;
            padding: 0;
            height: 100vh;
            display: flex;
            position: relative; /* 使子元素相对于body定位 */
            background-image: url("/image/background.png");
        }

        .overlay-image {

        }

        #main {
            width: 550px;
            height: 500px;
            position: fixed;
            top: 30px;
            left: 0;


        }

        .background-container {
            width: 100%; /* 设置容器宽度 */
            height: 100px; /* 设置容器高度 */
            background-image: url("/image/head.png"); /* 设置背景图片的URL */
            align-content: center;
            background-repeat: no-repeat;
        }

        .background-container h1 {
            display: flex; /* 使用 Flex 布局 */
            align-items: center; /* 垂直居中 */
            justify-content: center; /* 水平居中 */
            text-align: center; /* 水平居中文本 */
            color: aqua;
        }


    </style>
</head>
<body>

<div class="background-container">
    <h1>医院就医大屏</h1>

        <!-- ECharts 图表容器 -->
        <div id="main" style="width: 550px;height:350px;">
        </div>

</div>



<!-- ECharts 组件 -->

</body>

<script type="text/javascript">
    // 初始化ECharts组件到id为main的元素上
    $(document).ready(function () {
        myChart = echarts.init(document.getElementById('main')); // 初始化myChart
        $.ajax({
            type: "post",
            async: true,
            url: "http://localhost:8080/num",
            contentType: "application/json",  // 添加此行
            data: {},
            dataType: "json",
            success: function (result) {
                if (result && result.length > 0) {
                    var names = result.map(function (item) {
                        return item.name;
                    });
                    var values = result.map(function (item) {
                        return item.num;
                    });

                    myChart.hideLoading();
                    console.log(names)
                    console.log(values)

                    myChart.setOption({
                        title: {
                            text: "近七日就医人员",
                            textStyle: {
                                color: 'white' // 设置标题颜色
                            },
                            left: 'center', // 设置标题水平居中

                        },
                        tooltip: {},
                        xAxis: {
                            data: names,
                            axisLine: {
                                lineStyle: {
                                    color: 'white' // 设置 X 轴线颜色
                                }
                            },
                            axisLabel: {
                                color: 'white' // 设置 X 轴刻度文字颜色
                            },
                            splitLine: {
                                show: false // 设置横向网格线不显示
                            }
                        },
                        yAxis: {
                            axisLine: {
                                lineStyle: {
                                    color: 'white' // 设置 Y 轴线颜色
                                }
                            },
                            axisLabel: {
                                color: 'white' // 设置 Y 轴刻度文字颜色
                            }, splitLine: {
                                show: false // 设置纵向网格线不显示
                            }
                        },
                        series: [{
                            data: values,
                            type: 'bar',
                            itemStyle: {
                                color: '#00FF99'
                            }
                        }]
                    });
                }
            },
            error: function (errorMSg) {
                console.log(errorMSg);
                alert("请求失败！");
                myChart.hideLoading();
            }
        })
    });


</script>
</html>
